
<template>
  <div>
    <van-nav-bar
      v-show="title"
      :title="title"
      left-text="返回"
      left-arrow
      @click-left="router.back()"
    />
    <router-view/>
    <TabBar v-show="showTabBar"/>
    <!-- 回到顶部 -->
    <van-back-top bottom="70"/>
  </div>
</template>

<script setup>
import {onMounted, ref, watch} from 'vue'
import {useRoute,useRouter} from 'vue-router'
// 仓库
import useUserInfo from '@/stores/useUserInfo'
import useCartInfo from '@/stores/useCartInfo';
import { getToken } from './utils/token';

// 控制底部tabbar组件
let showTabBar=ref(true);
// 控制标题
let title=ref('')
// 路由实例
let route=useRoute();
// 路由器实例
let router=useRouter();

// 仓库实例
let store=useUserInfo();

let storeCart=useCartInfo()

// 监听路由变化
watch(route,(newRoute)=>{
  showTabBar.value=newRoute.meta.isShowNav;
  title.value=newRoute.meta.title
})

// 页面刷新时 并且有cookie 重新在仓库存储用户信息
onMounted(()=>{
  if(getToken()){
    store.getUserInfo();
    // 获取购物车数据
    storeCart.getCartList();
  }
})

</script>




